<template>
  <div class="app-container">
    <el-card shadow="never" v-loading="loading">
      <el-row :gutter="5">
        <el-col :span="24" class="main-card-view">
          <el-row>
            <el-card shadow="never">
              <el-row>
                <el-form :model="form" label-width="120px">
                  <el-form-item label="审批流程名称">
                    <el-input v-model="form.approvalFlowName" style="width:40% ;"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="发布人">
                    <el-input v-model="form.publisher" readonly style="width:40% ;"></el-input>
                    <el-button type="primary" @click="selectPersonnel('')" style="margin-left: 30px;">选择人员</el-button>
                  </el-form-item> -->
                  <el-form-item label="审批级别">
                    <el-select v-model="form.approvalLevel" placeholder="请选择">
                      <el-option v-for="(item) in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-button type="primary" style="margin-left: 120px;" @click="save">保存</el-button>
                  <el-button style="margin-left: 120px;" @click="$router.go(-1)">返回</el-button>
                </el-form>
              </el-row>
            </el-card>
          </el-row>
          <el-row>
            <el-card shadow="never">
              <div style="margin-bottom: 30px;">
                <el-button type="primary" @click="createColumn">添加审批内容</el-button>
              </div>
              <el-table :data="tableData" :stripe="true" style="width: 60%">
                <el-table-column prop="firstLevelColumn" align="center" label="一级栏目" />
                <el-table-column prop="secondaryColumn" align="center" label="二级栏目" />
                <el-table-column prop="" align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="edit(scope.row)" class="table-edit-btn"></el-button>
                    <el-button type="text" @click="del(scope.row)" class="table-delete-btn"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog width="30%" :title="dialogTiele" :visible.sync="columnDialog">
      <el-cascader v-model="tableItem" :options="treeData" :props="defaultProps" ref="cascader" style="width:520px"
        @change="closeTanc"></el-cascader>
      <template slot="footer">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as classifyManger from "../../api/classifyManger"
import * as ApprovalConfig from "../../api/ApprovalConfig"
// import personnel from '../../components/personnel.vue'
export default {
  // components: { personnel },
  data () {
    return {
      form: {
      },
      tableData: [],
      loading: false,
      total: 0,
      options: [
        { label: '一级', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 },
        { label: '四级', value: 4 },
        { label: '五级', value: 5 }],
      dialogVisible: false,
      columnDialog: false,
      treeData: [],
      status: '',
      defaultProps: {
        expandTrigger: 'hover',
        //emitPath: false,
        value: 'classifyName',
        children: "children",
        label: "classifyName",
        checkStrictly: true
      },
      tableItem: null,
      routerStatus: '',
      dialogTiele: '添加审批内容',
      columnUid: ''
    }
  },
  methods: {
    selectPersonnel () {
      this.dialogVisible = true
    },
    getName (msg) {
      this.form.publisher = msg.userName
      this.dialogVisible = false
    },
    trimTree (tree, level = 0) {
      if (level >= 1) {
        delete tree.children
      } else if (tree.children) {
        for (let i = 0; i < tree.children.length; i++) {
          const child = tree.children[i];
          this.trimTree(child, level + 1);
        }
      }
      return tree;
    },
    getData () {
      classifyManger.queryTree({}).then(result => {
        let arr = result.data.data
        arr.map(item => {
          this.trimTree(item)
        })
        this.treeData = arr
      }).catch(error => {
        console.log(error);
      })
    },
    searchNodeByUid (tree, uid) {
      for (let item of tree) {
        if (item.children && item.children.length > 0) {
          const result = this.searchNodeByUid(item.children, uid);
          if (result) {
            return result;
          }
        }
        if (item.uid === uid) {
          console.log(item.classifyName)
          return item.classifyName
        }
      }
    },
    createColumn () {
      this.dialogTiele = '添加审批内容'
      this.tableItem = null
      this.columnDialog = true
    },
    getColumn () {
      const param = {
        approvalSetUid: this.form.uid
      }
      ApprovalConfig.queryColumn(param).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.rows
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleSave () {
      if (this.dialogTiele === '添加审批内容') {
        this.addContent()
      } else if (this.dialogTiele === '修改审批内容') {
        this.editContent()
      }
    },
    addContent () {
      const param = {
        approvalSetUid: this.form.uid,
        firstLevelColumn: this.tableItem[0],
        secondaryColumn: this.tableItem[1]
      }
      ApprovalConfig.addColumn(param).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.columnDialog = false
          this.getColumn()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    editContent () {
      const param = {
        uid: this.columnUid,
        approvalSetUid: this.form.uid,
        firstLevelColumn: this.tableItem[0],
        secondaryColumn: this.tableItem[1]
      }
      ApprovalConfig.updateColumn(param).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.columnDialog = false
          this.getColumn()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    edit (data) {
      this.dialogTiele = '修改审批内容'
      this.columnUid = data.uid
      this.tableItem = [data.firstLevelColumn, data.secondaryColumn]
      this.columnDialog = true
    },
    del (data) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          uid: data.uid,
        }
        this.loading = true
        ApprovalConfig.delColumn(param).then(result => {
          this.$message.success(result.data.msg)
          this.loading = false
          this.getColumn()
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      }).catch(() => {
        console.log('取消删除')
      });
    },
    getUid () {
      var uid = '';
      var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      var charCount = chars.length;
      for (var i = 0; i < 32; i++) {
        uid += chars.charAt(Math.floor(Math.random() * charCount));
      }
      return uid;
    },
    save () {
      if (this.routerStatus === 'add') {
        ApprovalConfig.insert(this.form).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.$router.go(-1)
          }
        }).catch(error => {
          console.log(error)
        })
      } else if (this.routerStatus === 'edit') {
        ApprovalConfig.update(this.form).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.$router.go(-1)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    closeTanc (e) {
      this.$refs.cascader.dropDownVisible = false
    }
  },
  mounted () {
    this.routerStatus = this.$route.query.status
    if (this.routerStatus === 'add') {
      this.form.uid = this.getUid()
    } else if (this.routerStatus === 'edit') {
      this.form = JSON.parse(sessionStorage.getItem('ApprovalConfig'))
      this.form.approvalLevel = Number(this.form.approvalLevel)
    }
    this.getColumn()
    this.getData()
  }
}
</script>

<style scoped lang="scss"></style>
